<%if access_through_token?(@story.id)
  link_to (content_tag :span, 'Edit story'), edit_story_path(@story.token), :class => "btn green edit"
end %>
<!-- <h1 class="header-title big"><%= link_to t(".title"), stories_path %></h1> -->

<section class="header-stories">
  <div class="inner">
    <header>
      <a class="back-btn desktop-show" href="/stayinformed/crowdsourced-stories"><svg><use xlink:href="#shape-fast-forward-left"></use></svg>Back to crowdsourced stories</a>
      <h2><%= @story.title %></h2>
      <p>
      <% if @story.location.present?  %>
        <span><%= @story.location %></span>
      <% end %>
      <% if @story.location.present? && (@story.name.present? || @story.date.present?)%>
        <span>&middot;</span>
      <% end %>
      <% if @story.date.present?  %>
        <span><%= @story.date.to_datetime.strftime("%B %d, %Y") %></span>
      <% end %>
      <% if @story.date.present? && @story.name.present? %>
        <span>&middot;</span>
      <% end %>
      <% if @story.name.present?  %>
        <span>Submitted by <%= @story.name %></span>
      <% end %>
      </p>
    </header>
  </div>
</section>
<section class="content-stories">
  <div class="inner">
    <div id="carrousel-stories" class="story-carrousel <% if (!@story.media[1].present? && !@story.media[0]['embed_url'].present?)  %>no-padding<%end%>">
      <% if (@story.media[1].present? || @story.media[0]['embed_url'].present?) %>
        <a href='#' data-direction="prev" class='btn-nav previous'></a>
        <a href='#' data-direction="next" class='btn-nav next'></a>
      <% end %>
      <ul>
        <% if (@story.media[1].present? || @story.media[0]['embed_url'].present?)  %>
          <% @story.media.each do |media| %>
            <% if media['embed_url'].present? %>
              <li class='slide'><%= youtube_embed(media['embed_url']).html_safe %></li>
            <% end %>

            <% if media['url'].present? %>
              <li class='slide'>
                <div class="bg full-screen" data-bg="<%= "#{ENV['AWS_HOST']}/#{media['url']}" %>" style="background-image: url(<%= "#{ENV['AWS_HOST']}/#{media['url']}" %>);"></div>
              </li>
            <% end %>
          <% end %>
        <% end %>
        <li class="slide">
          <div class="bg is-cover" style="background-image: url(<%= static_map("#{@story.lat}, #{@story.lng}", '1600x500', 5, true) %>);"></div>
        </li>
      </ul>
      <div id="paginationView" class="main-slider-pagination"></div>

    </div>
    <div class='story-content'>
      <p><%= simple_format(raw("<span class='dropcap'>#{@story.details[0, 1]}</span>") + @story.details[1, @story.details.length - 1]).gsub("</p>\n\n<p>", "<br /><br />").html_safe %></p>
      <% if (@story.media[1].present?) %>
          <p class="show_mobile" style="background-image: url('<%= "#{ENV['AWS_HOST']}/#{@story.media[1]['url']}" %>')"></p>
      <% end %>
    </div>
    <div class="story-share_buttons">
      <div id="fb-root"></div>
      <a href="http://twitter.com/share" target="_blank" class="twitter-share-button" data-url="http://www.globalforestwatch.org<%=request.fullpath %>" data-text="Global Forest Watch">Tweet</a>
      <div class="g-plusone" data-size="medium" data-href="http://www.globalforestwatch.org<%=request.fullpath %>"></div>
      <div class="fb-like" data-href="http://www.globalforestwatch.org<%=request.fullpath %>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
    </div>
  </div>
</section>

<div id="fullScreenView" class="story-modal"></div>

<%= render 'more_stories' %>



<section id="interestingView" class="interesting-section"></section>
